<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> -->
<script src="./vue.js"></script>

<body>
    <div class="box">
        <!-- <h1 v-yangyang="name1"></h1>
        <h1 v-yangyang="name1"></h1> -->
        <h1 v-yangyang="msg"></h1>
        <!-- <h2>{{fullname}}</h2> -->
        <input v-model="fullName"></input>
    </div>
</body>
<script>
    Vue.directive('yangyang', {
        inserted(el, binding, vnode) {
            el.innerText = binding.value.toUpperCase();
        }
    })
    let vm = new Vue({
        el: ".box",
        data: {
            name1: "aaaaaa",
            name2: "2",
            name3: 3,
            name4: 4,
            h11: "1111",
            msg: 'yangyangyangyang',
            // fullname: ""
        },
        // methods: {

        // },
        // derectives: 
        // directives: {
        //     upper: {
        //         bind(el, binding, vnode) {
        //             // el.innertext = binding.value;
        //             console.log(binding)
        //             console.log(el)
        //         }
        //     }
        // },
        computed: {
            // fullname() {
            //     return this.name1 + "-" + this.name2
            // }
            fullName() {
                return this.name1 + '-' + this.name2
            }
        }
    })

    // Vue.directives("haha", {
    //     bind(el, bind, vnode) {
    //         el.innerText = binding.value.toUpperCase();
    //     }
    // })
</script>

</html>